import { useEffect } from "react";
import { history, useModel, Outlet } from "umi";
import { useReactive } from "ahooks";
import { Row, Col, Card, Space, Table, Tag, Descriptions, Collapse } from "antd";
import { Card as SemiCard, List, ButtonGroup, Button, Nav } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconEdit, IconDelete } from "@douyinfe/semi-icons";

// 员工工资
const SalaryPage = () => {
    const { windowInnerHeight } = useModel("global");

    const state = useReactive({
        loading: false,
        staffs: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 11, 1, 1, 1, 1, 1, 1, 1, 1],
    });

    const loadStaffs = async () => {
        state.loading = true;
        state.loading = false;
    };

    useEffect(() => {
        loadStaffs();
    }, []);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 15 }}>员工工资信息</span>}
                headerStyle={{ padding: "7px 12px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                headerExtraContent={
                    <Space size={20} style={{ fontWeight: "normal" }}>
                        <div>
                            待发月份: <Tag color="cyan">2023年03月</Tag>
                        </div>
                        <div>工资合计: 12,200.00</div>
                        <ButtonGroup>
                            <Button icon={<IconRefresh />}></Button>
                        </ButtonGroup>
                    </Space>
                }
            >
                <Table
                    loading={state.loading}
                    dataSource={state.staffs}
                    size="small"
                    bordered
                    rowKey={"id"}
                    pagination={false}
                    scroll={{ y: cardBodyHeight - 80 - 40 }}
                    summary={(pageData) => {
                        let totalBorrow = 0;
                        let totalRepayment = 0;
                        // pageData.forEach(({ borrow, repayment }) => {
                        //     totalBorrow += borrow;
                        //     totalRepayment += repayment;
                        // });
                        return (
                            <Table.Summary fixed>
                                <Table.Summary.Row>
                                    <Table.Summary.Cell index={0} align="center">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={1} align="center">
                                        人数
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        {totalBorrow}
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                    <Table.Summary.Cell index={2} align="right">
                                        合计
                                    </Table.Summary.Cell>
                                </Table.Summary.Row>
                            </Table.Summary>
                        );
                    }}
                >
                    <Table.Column title="序号" width={60} align="center" render={(_, r, i) => i + 1} />
                    <Table.Column title="姓名" width={100} align="left" />
                    <Table.Column title="基本工资" dataIndex={"bzType"} width={100} align="right" />
                    <Table.Column title="缴费基数" dataIndex={"bzDesc"} width={100} align="right" />
                    <Table.ColumnGroup title="养老保险">
                        <Table.Column title="单位" dataIndex={"bzAmou"} width={100} align="center" render={(_, r, i) => "300.00 (8%)"} />
                        <Table.Column title="个人" dataIndex={"bzAmou"} width={100} align="center" render={(_, r, i) => "300.00 (8%)"} />
                    </Table.ColumnGroup>
                    <Table.ColumnGroup title="医疗保险">
                        <Table.Column title="单位" dataIndex={"bzAmou"} width={100} align="center" render={(_, r, i) => "300.00 (8%)"} />
                        <Table.Column title="个人" dataIndex={"bzAmou"} width={100} align="center" render={(_, r, i) => "300.00 (8%)"} />
                    </Table.ColumnGroup>
                    <Table.ColumnGroup title="住房公积金">
                        <Table.Column title="单位" dataIndex={"bzAmou"} width={100} align="center" render={(_, r, i) => "300.00 (8%)"} />
                        <Table.Column title="个人" dataIndex={"bzAmou"} width={100} align="center" render={(_, r, i) => "300.00 (8%)"} />
                    </Table.ColumnGroup>
                    <Table.Column
                        title={
                            <div>
                                生育保险<div>(单位)</div>
                            </div>
                        }
                        dataIndex={"bzAmou"}
                        width={100}
                        align="center"
                        render={(_, r, i) => "300.00 (8%)"}
                    />
                    <Table.Column
                        title={
                            <div>
                                失业保险<div>(单位)</div>
                            </div>
                        }
                        dataIndex={"bzAmou"}
                        width={100}
                        align="center"
                        render={(_, r, i) => "300.00 (8%)"}
                    />
                    <Table.Column
                        title={
                            <div>
                                工伤保险<div>(单位)</div>
                            </div>
                        }
                        dataIndex={"bzAmou"}
                        width={100}
                        align="center"
                        render={(_, r, i) => "300.00 (8%)"}
                    />
                    <Table.Column title="增项合计" dataIndex={"bzAmou"} width={80} align="right" render={(_, r, i) => <a>查明细</a>} />
                    <Table.Column title="减项合计" dataIndex={"bzAmou"} width={80} align="right" render={(_, r, i) => <a>查明细</a>} />
                    <Table.Column title="应发金额" dataIndex={"bzAmou"} width={80} align="right" />
                    <Table.Column
                        title="操作"
                        width={100}
                        align="center"
                        render={(_, r, i) =>
                            r.bzType === "手工录入" && (
                                <Space size={0}>
                                    <Button theme="borderless" icon={<IconEdit />} onClick={() => {}}></Button>
                                    <Popconfirm title="确认要删除该银行账户流水信息吗？" okButtonProps={{ loading: state.submitLoading }} onConfirm={() => {}}>
                                        <Button theme="borderless" icon={<IconDelete />}></Button>
                                    </Popconfirm>
                                </Space>
                            )
                        }
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default SalaryPage;
